<template>
  <div 
    class="goods-list-item" 
    @click="goodsClick">

    <div class="img-item">
      <img v-lazy="item.img" @load="imgLoaded" alt="">
    </div>

    <div class="goods-info">
      <p>{{item.title}}</p>
      <span class="price">￥{{item.price}}</span>
      <span class="collect">{{item.cfav}}</span>
    </div>

  </div>
</template>

<script>
  export default {
    name: "GoodsListItem",
    props: {
      item: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    methods: {
      imgLoaded() {
        // console.log("imgLoaded");
        this.$bus.$emit("imgLoaded");
      },
      goodsClick() {
        //切换路由
        //动态路由
        // this.$router.push("/detail" + this.item.iid);
        //查询路由
        this.$router.push({
          path: "/detail",
          query: {
            iid: this.item.iid,
          }
        })
      }
    }
  }
</script>

<style scoped>
  .goods-list-item {
    width: 48%;
    padding-bottom: 5px;
  }
  .img-item img {
    width: 100%;
    border-radius: 5px;
  }
  .goods-info {
    text-align: center;
    margin-top: 4px;
    font-size: 15px;
    overflow: hidden;
  }
  .goods-info p{
    margin-bottom: 5px;
    white-space: nowrap; /*不换行*/
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .goods-info .price {
    color: #ff5777;
    margin-right: 30px;
  }
  .goods-info .collect {
    position: relative; /*子绝父相*/
  }
  .goods-info .collect::before {
    width: 14px;
    height: 14px;
    content: "";
    background: url("~assets/img/common/collect.svg") no-repeat 0/14px;
    position: absolute;/*子绝父相*/
    left: -16px;
    top: 1px;
  }
</style>
